<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="实时监测"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="monitor">
      <div>您的血糖为：<br><span>3.9mmol/L</span></div>
      <div>您的舒张压为：<br><span>80mmHg</span></div>
      <div>您的收缩压为：<br><span>120mmHg</span></div>
      <div>您的胰岛素为：<br><span>20mU</span>/L</div>
    </div>
    <div class="list">
      <div class="listEmp">
        <div class="list_left">
          <img width="80px" src="../../assets/血糖仪.webp" alt="">
          <div class="infomation" @click="toEquDetails">
            <div class="title">常规血糖仪</div>
            <div class="description">精准测量，试纸超便宜</div>
          </div>
        </div>
        <div class="list_right">
          <van-icon class="icon_right" name="arrow" />
        </div>
      </div>
      <div class="listEmp">
        <div class="list_left">
          <img width="80px" src="../../assets/尿酸.webp" alt="">
          <div class="infomation">
            <div class="title">常规血糖仪</div>
            <div class="description">精准测量，试纸超便宜</div>
          </div>
        </div>
        <div class="list_right">
          <van-icon class="icon_right" name="arrow" />
        </div>
      </div>
      <div class="listEmp">
        <div class="list_left">
          <img width="80px" src="../../assets/血压计.webp" alt="">
          <div class="infomation">
            <div class="title">常规血糖仪</div>
            <div class="description">精准测量，试纸超便宜</div>
          </div>
        </div>
        <div class="list_right">
          <van-icon class="icon_right" name="arrow" />
        </div>
      </div>
      <div class="listEmp">
        <div class="list_left">
          <img width="80px" src="../../assets/胰岛素.webp" alt="">
          <div class="infomation">
            <div class="title">常规血糖仪</div>
            <div class="description">精准测量，试纸超便宜</div>
          </div>
        </div>
        <div class="list_right">
          <van-icon class="icon_right" name="arrow" />
        </div>
      </div>
    </div>
  </div>
  
</template>
<script>
  export default {
    data(){
      return {

      }
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      },
      toEquDetails(){
        this.$router.push({
          path:'equimentDetail'
        })
      }
    }
  }
1</script>
<style lang="less" >
.header{
  margin-bottom: 10px;
}
.monitor{
  span{
    margin-left: 40px;
    font-family: "微软雅黑";
    font-size: 16px;
  }
  height: 200px;
  font-family: "楷体";
  font-size: 18px;
  width: 95%;
  margin: 0 auto;
  line-height: 28px;  
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;
  div{
    padding: 8px;
    border-radius: 15px;
    box-sizing: border-box;
    flex-basis: 45%;
    box-shadow: 0 0 5px #53a8ef;
    margin: 8px;
    background-color:rgba(83,168,239, 0.2) ;
  }
}
.van-nav-bar__content {
  background-color: #53a8ef;
  .van-nav-bar__title,
  .van-icon-arrow-left,
  .van-nav-bar__text {
    color: white;
  }
}
.list{
  .listEmp:active{
   background-color: #eff4f8;
  }
  .listEmp{
    cursor: pointer;
    border-radius: 5px;
    height: 90px;
    width:90%;
    box-shadow:0 0 5px #ccc;
    margin: 10px auto;
    display: flex;
    .list_left{
      flex: 3;
      display: flex;
      img{
        width: 60px;
        height: 60px;
        margin: 15px;
      }
      .infomation{
        margin-top: 18px;
        .title{
          margin-bottom: 18px;
          font-weight: bold;
        }
        .description{
          color: #707071;
          font-size: 14px;
        }
      }
    }
    .list_right{
      flex: 1;
      .icon_right{
        font-size: 50px;
        margin:20px 10px 0 30px ;
        color: #707071;
      }
    }
  }
}
</style>